<template>
  <div>
    <!-- 分组选择 -->
    <Selector :data="options" @select-change="setTargetIndex"></Selector>
    <!-- 穿梭框 -->
    <div class="transfer">
      <!-- 左侧列表栏 @dragover.prevent默认事件防止拖拽回弹-->
      <div
        class="box left-list"
        @dragover.prevent
        @drop="removeRightListData([dragedItem])"
      >
        <ListTitle :title="leftTitle"></ListTitle>
        <div class="list-content">
          <!-- 左侧列表项 -->
          <ListItem
            :data="leftListData"
            left-or-right="left"
            @check-box-click="setCheckedData"
            @drag-item="setDragedItem"
          ></ListItem>
        </div>
      </div>
      <!-- 中间区域 左右两侧按钮 -->
      <ButtonGroup
        :left-btn-disabled="transferBtnDisabled.left"
        :right-btn-disabled="transferBtnDisabled.right"
        @left-btn-click="removeRightListData(checkedData.right)"
        @right-btn-click="addRightListData(checkedData.left)"
      ></ButtonGroup>
      <!-- 右侧列表栏 -->
      <div
        class="box right-list"
        @dragover.prevent
        @drop="addRightListData([dragedItem])"
      >
        <ListTitle :title="rightTitle"></ListTitle>
        <div class="list-content">
          <!-- 右侧列表项 -->
          <ListItem
            :data="rightListData"
            left-or-right="right"
            @check-box-click="setCheckedData"
            @drag-item="setDragedItem"
          ></ListItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Selector from './components/Selector';
import ListTitle from './components/ListTitle';
import ButtonGroup from './components/ButtonGroup';
import ListItem from './components/ListItem';

import propsDefination from './extends/props';
import {
  useTargetIndex,
  useComputedData,
  useRightListData,
  useCheckedData,
  useDragedItem
} from './extends/hooks';

const props = defineProps(propsDefination);

// defineExpose(['selectChange']);

//获取所有项里的title组成一个数组
const options = props.data.map(({ title }) => title);
// console.log(options);
//['华为', '小米', 'iPhone']

//自定义Hook来获取当前索引和设置索引的方法供视图使用
const [targetIndex, setTargetIndex] = useTargetIndex(0);

//获取选中数据的左右容器和设置该数据的方法供视图使用
const [checkedData, addCheckedData, removeCheckedData] = useCheckedData();

//获取右侧列表数据
const [rightListData, addRightListData, removeRightListData] = useRightListData(
  [],
  checkedData
);

//获取标题属性供视图使用
const { leftTitle, leftListData, transferBtnDisabled } = useComputedData(
  props.data,
  targetIndex,
  rightListData,
  checkedData
);
/**
console.log(leftListData.value);
 * [
 *   {id: 1, phone_name: 'Mate 40 Pro', disabled: false},
 *   {id: 2, phone_name: 'P40 Pro', disabled: true},
 *   ...
 * ]
 */

//勾选某项复选框添加至临时左侧/右侧容器或从该容器中删除某项
const setCheckedData = (checked, leftOrRight, item) => {
  // console.log(checked, leftOrRight, item);
  //true 'left' {id: 1, phone_name: 'Mate 40 Pro', disabled: false}

  //如果选中就新增项目进临时容器
  if (checked) {
    addCheckedData(leftOrRight, item);
  } else {
    //反选即从临时容器中删除某项
    removeCheckedData(leftOrRight, item.id);
  }

  // console.log(checkedData);
  //Proxy {left: [{id: 4, phone_name: 'Mate Xs 2', disabled: false}], right: Array(0)}
};

//拖拽某一项到另一侧
const [dragedItem, setDragedItem] = useDragedItem();
</script>

<style lang="scss" scoped>
.transfer {
  display: flex;
  flex-direction: row;
  width: 450px;
  height: 300px;
  margin-top: 5px;

  .box {
    width: 150px;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;

    &.button-group {
      border: 1px solid #fff;
    }

    .list-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-top: 5px;
      margin-left: 6px;
    }
  }
}
</style>
